$(function(){
    $('#goregitst').click(function(){
        $('.login-box').hide().siblings('.reg-box').show().parent('.loginAndRegBox').css({
            "height":"280px"
        });
    })
    $('#gologin').click(function(){
        $('.reg-box').hide().siblings('.login-box').show().parent('.loginAndRegBox').css({
            "height":"240px"
        });
    })


    // 自定义正则表达式
    // 因为正则表达涉及到form表单属性，需要用到layui里面的from对象
    let form = layui.form;
    // 使用弹出层，必须使用layui的layer属性
    var layer = layui.layer;
    form.verify({
        username: function (value, item) {
          //value：表单的值、item：表单的DOM对象
          if (!new RegExp('^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$').test(value)) {
            return '用户名不能有特殊字符';
          }
          if (/(^\_)|(\__)|(\_+$)/.test(value)) {
            return "用户名首尾不能出现下划线'_'";
          }
          if (/^\d+\d+\d$/.test(value)) {
            return '用户名不能全为数字';
          }
        }, 
        //我们既支持上述函数式的方式，也支持下述数组的形式
        //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
        pass: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
        repass: function (value) {
        //   console.log(value, $('.reg-box [name=password]').val());
          if ($('.reg-box [name=password]').val() != value) {
            return '两次输入密码不一样，请重新输入';
          }
        },
        email:function(value,item){
          if(!new RegExp('^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$').test(value)){
            return '邮箱地址不正确'
          }
        }
      });

    //   获取表单值，发送请求
    // 给form表单绑定提交事件,注册事件的ajax请求
    $('#register-form').submit(function(e){
        e.preventDefault();
        // 获取输入的用户名和密码
        let username = $('#username-id-regist').val();
        let password = $('#password-id-regist').eq(0).val();
        // console.log(username,password);
        // 获取用户名和密码之后，发送ajax请求，查看接口文档
        $.post('/api/reguser',{username,password},function(res){
            // console.log(res);.
            if(res.status === 0){
                layer.msg('注册成功，请登录',{icon:1});
                // 注册成功之后，跳转到登录页面
                $('#gologin').click();
                // 将注册的用户名获取到，添加到登陆界面的用户框
                $('#username-id-login').val(username);
            } else {
                // 提示框显示登录失败
                layer.msg('注册失败',{icon:5});
                return false;
            }
        })
    })

    // 给form绑定提交时间，登录事件的ajax请求
    $('#login-form').submit(function(e){
        e.preventDefault();
        // 获取用户名和登录密码
        // let username = $('#username-id-login').val();
        // let password = $('#password-id-login').val();
        let parmas = $(this).serialize();
        // console.log(parmas);
        // console.log(username,password);
        $.post('/api/login',parmas,function(res){ 
            if(res.status !== 0){
                // 弹出提示框，提示登录失败
                return layer.msg('登录失败，请确认用户名和密码是否正确',{icon:2});
            } 
            // 登录成功之后，拿到token的属性，存储到本地
            // let token = res.token;
            localStorage.setItem('token',res.token)
            window.location.href = 'index.html';
        })
    })
})